<template>
	<div class="main">
		<van-dropdown-menu>
			<van-dropdown-item v-model="valueCg" :options="cgList" @change="getProductListOne" />
			<van-dropdown-item v-model="valueSort" :options="option2" @change="getProductListTwo" />
		</van-dropdown-menu>
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" :offset="10">
			<div class="list_container">
				<shopCard v-for="(item, index) in productList" :key="item.id" :info="item" />
			</div>
		</van-list>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { useStore } from 'vuex';
import shopCard from '@/components/shopCard/index.vue';
import { List, CategoryList } from '@s/products';
const { proxy } = getCurrentInstance();
const data = reactive({
	productList: [],
	cgList: [
		{ text: '全部商品', value: 0 },
		{ text: '手机数码', value: 1 },
		{ text: '家用电器', value: 2 },
		{ text: '日常用品', value: 3 },
		{ text: '宠物用品', value: 4 },
		{ text: '服装服饰', value: 5 },
		{ text: '文具', value: 6 },
		{ text: '书籍', value: 7 },
		{ text: '家具', value: 8 },
	],
	valueCg: 0,
	valueSort: 'a',
	pageNum: 1,
	pageSize: 6,
	maxNum: 0,
});
const { productList, cgList, valueCg, valueSort, pageNum, pageSize, maxNum } = toRefs(data);
const loading = ref(false);
const finished = ref(false);
const option2 = [
	{ text: '默认排序', value: 'a' },
	{ text: '价格升序', value: 'b' },
	{ text: '价格降序', value: 'c' },
	// { text: '最新发布', value: 'd' },
];
if(proxy.$route.params.id){
	data.valueCg=parseInt(proxy.$route.params.id)
}
List({ cid: data.valueCg, pageNum: data.pageNum, pageSize: data.pageSize,selled: 0 }).then((res) => {
	data.productList = res.data.data;
	data.maxNum = res.data.lastNum;
	data.pageNum++;
	if (data.productList.length < 6) {
		finished.value = true;
	}
});

const onLoad = () => {
	// 异步更新数据
	List({ cid: data.valueCg, pageNum: data.pageNum, pageSize: data.pageSize }).then((res) => {
		data.productList = [...data.productList, ...res.data.data];
		setTimeout(() => {
			loading.value = false;
		}, 100);
	});
	if (data.pageNum < data.maxNum) {
		data.pageNum++;
	} else {
		finished.value = true;
	}
	// 数据全部加载完成
	// if (list.value.length >= 40) {
	//   finished.value = true;
	// }
};
//获取分类列表
const getProductListOne = (value) => {
	data.valueCg = value;
	data.pageSize = 6;
	data.pageNum = 1;
	finished.value = false;
	List({ cid: data.valueCg, pageSize: data.pageSize, pageNum: data.pageNum }).then((res) => {
		data.productList = res.data.data;
		if (data.productList.length < 6) {
			finished.value = true;
		}
	});
};
//获取排序列表
const getProductListTwo = (value) => {
	let sortTarget = '';
	if (value == 'a') sortTarget = '';
	if (value == 'b') sortTarget = 'desc';
	if (value == 'c') sortTarget = 'asc';
	data.pageSize = 6;
	data.pageNum = 1;
	List({ sort: sortTarget, pageSize: data.pageSize, pageNum: data.pageNum }).then((res) => {
		data.productList = res.data.data;
		if (data.productList.length < 6) {
			finished.value = true;
		}
	});
};
const emit = defineEmits(['loading']);
onMounted(() => {
	emit('loading');
});
</script>

<style lang="scss" scoped>
.main {
	padding-bottom: 50px;
}
.list_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 10px;
	padding: 0px 10px;
	div {
		margin-bottom: 10px;
	}
}
</style>
